<template>
  <div id="main_div" >
    <el-card style="width: 500px;height: 300px;margin: 100px auto;border-radius:10px">
      <el-form label-width="80px" style="margin-top: 50px;width: 430px;" >
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="user.username" ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" placeholder="请输入密码"  v-model="user.password"></el-input>
          </el-form-item>
         <el-form-item style="text-align: center;">
            <el-button type="primary" style="position: relative;right: 20px;" @click="login()" >登录</el-button>
          </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username:"",
        password:""
      }
    }
  },
  methods: {
    login() {
      let url = this.BASE_URL + '/v1/users/login'
      //将json对象转化为字符串对象
      //username=menghuan&password=520520
      let data = this.qs.stringify(this.user)
      this.axios.post(url,data).then(res=>{
        if(res.data.code == 1){
          this.$message.success("登录成功")
          //将数据保存在localStorage
          //因为在localStorage中存的是字符串对象 所以将json对象转化为字符串对象
          //'{"username":"menghuan","password":"520520"}'
          localStorage.setItem("user",JSON.stringify(res.data.data))

          //登录成功后跳转到个人的主页面
          //this.$router.push("/personal/index")
          //跳转之后刷新
          location.href = '/personal/index'

        }else{
          this.$message.error(res.data.msg)
        }
      })
    }
  },
}
</script>

<style scoped>
    #main_div{
      margin: 0 auto;
      height: 600px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url("/public/imgs/loginbg.gif");
      overflow: hidden;
    }
</style>
